import React, {Component} from 'react';
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from "@/components/TheQueryForm";
import _ from "lodash";
import {getDateTime3} from '@/utils/getDate'
import {apiGetCoinRechargeStatisticsPage} from '@/request/wallet/petCoinsStats';
import Json2Excel from '@/utils/Json2Excel'
import {Tooltip} from "antd";
import {QuestionCircleOutlined} from "@ant-design/icons";

class Index extends Component {
    queryFormRef = React.createRef();
    state = {
        exportLoading: false,
        columns: [
            {
                title: "列号",
                dataIndex: "id",
                key: "id",
            },
            {
                title: "日期",
                dataIndex: "date",
                key: "date",
            },
            {
                title: "时间",
                dataIndex: "time",
                key: "time",
            },
            {
                title: "金币总额（元）",
                dataIndex: "totalMoney",
                key: "totalMoney",
                filterDropdown: true,
                filterIcon: () => {
                    return (
                        <Tooltip zIndex={999} placement="top" title={() => {
                            return <div>
                                平台所有用户宠币余额+我的收益之和
                            </div>
                        }}>
                            <QuestionCircleOutlined/>
                        </Tooltip>
                    );
                },
                render: (text) => {
                    return <React.$price price={text || 0}/>
                }
            },
            {
                title: "充值金额（元）",
                dataIndex: "coinInMoney",
                key: "coinInMoney",
                filterDropdown: true,
                filterIcon: () => {
                    return (
                        <Tooltip zIndex={999} placement="top" title={() => {
                            return <div>
                                全平台用户充值的宠币金额
                            </div>
                        }}>
                            <QuestionCircleOutlined/>
                        </Tooltip>
                    );
                },
                render: (text) => {
                    return <React.$price price={text || 0}/>
                }
            },
            {
                title: "ios手续费",
                dataIndex: "serviceMoney",
                key: "serviceMoney",
                filterDropdown: true,
                filterIcon: () => {
                    return (
                        <Tooltip zIndex={999} placement="top" title={() => {
                            return <div>
                                ios用户充值宠币时，苹果收取的手续费
                            </div>
                        }}>
                            <QuestionCircleOutlined/>
                        </Tooltip>
                    );
                },
                render: (text) => {
                    return <React.$price price={text || 0}/>
                }
            },
            {
                title: "充值赠送金额",
                dataIndex: "coinGiveMoney",
                key: "coinGiveMoney",
                filterDropdown: true,
                filterIcon: () => {
                    return (
                        <Tooltip zIndex={999} placement="top" title={() => {
                            return <div>
                                平台用户充值宠币，赠送的宠币金额
                            </div>
                        }}>
                            <QuestionCircleOutlined/>
                        </Tooltip>
                    );
                },
                render: (text) => {
                    return <React.$price price={text || 0}/>
                }
            },
            {
                title: "转盘赠送金额",
                dataIndex: "coinLuckyGiveMoney",
                key: "coinLuckyGiveMoney",
                filterDropdown: true,
                filterIcon: () => {
                    return (
                        <Tooltip zIndex={999} placement="top" title={() => {
                            return <div>
                                幸运抽奖所赠送的宠币金额
                            </div>
                        }}>
                            <QuestionCircleOutlined/>
                        </Tooltip>
                    );
                },
                render: (text) => {
                    return <React.$price price={text || 0}/>
                }
            },
            {
                title: "已提现金额",
                dataIndex: "coinOutMoney",
                key: "coinOutMoney",
                filterDropdown: true,
                filterIcon: () => {
                    return (
                        <Tooltip zIndex={999} placement="top" title={() => {
                            return <div>
                                平台用户已提现的金额
                            </div>
                        }}>
                            <QuestionCircleOutlined/>
                        </Tooltip>
                    );
                },
                render: (text) => {
                    return <React.$price price={text || 0}/>
                }
            }
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        form_show: true,
        searchOption: [
            {field: 'time', label: '时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker'},
        ],
        queryForm: {},
    };

    async componentDidMount() {
        this.getData();
    }

    getData = async () => {
        let {queryForm, pageData} = this.state;
        if (queryForm && !_.isEmpty(queryForm.time)) {
            queryForm.startTime = getDateTime3(queryForm.time[0]) + ' 00:00:00'
            queryForm.endTime = getDateTime3(queryForm.time[1]) + ' 23:59:59'
            delete (queryForm.time)
        }
        let params = {
            ...queryForm,
            ...pageData
        }
        console.log(params);
        let res = await apiGetCoinRechargeStatisticsPage({...params})
        if (res.code === 0) {
            this.setState({
                dataSource: res.data,
                pageData: {
                    pageNo: res.pageNo,
                    pageSize: res.pageSize
                },
                total: res.totalCount
            })
        }
    };
    pageChange = (pageNo, pageSize) => {
        this.setState({
                pageData: {pageNo, pageSize,},
            }, () => {
                this.getData();
            }
        );
    };
    //表格导出
    toExportTable = async () => {
        this.setState({exportLoading: true});
        let res = await apiGetCoinRechargeStatisticsPage({
            ...this.state.queryForm,
            pageSize: 10000
        })
        if (res.code === 0) {
            let tB_data = res.data.map((item, index) => {
                return {
                    ...item,
                    index: index + 1,
                    totalMoney: React.$transNum(item.totalMoney || 0, 2, -2),
                    coinInMoney: React.$transNum(item.coinInMoney || 0, 2, -2),
                    serviceMoney: React.$transNum(item.serviceMoney || 0, 2, -2),
                    coinGiveMoney: React.$transNum(item.coinGiveMoney || 0, 2, -2),
                    coinLuckyGiveMoney: React.$transNum(item.coinLuckyGiveMoney || 0, 2, -2),
                    coinOutMoney: React.$transNum(item.coinOutMoney || 0, 2, -2),
                };
            });
            const option = {
                header: [
                    {prop: "id", title: "列号"},
                    {prop: "date", title: "日期"},
                    {prop: "time", title: "时间"},
                    {prop: "totalMoney", title: "金币总额（元）", valueType: 'n'},
                    {prop: "coinInMoney", title: "充值金额（元）", valueType: 'n'},
                    {prop: "serviceMoney", title: "ios手续费", valueType: 'n'},
                    {prop: "coinGiveMoney", title: "充值赠送金额", valueType: 'n'},
                    {prop: "coinLuckyGiveMoney", title: "转盘赠送金额", valueType: 'n'},
                    {prop: "coinOutMoney", title: "已提现金额", valueType: 'n'},
                ],
                dataSource: tB_data,
                fileName: '平台宠币统计'
            }
            this.setState({exportLoading: false});
            Json2Excel(option)
        } else {
            React.$message({
                type: "warning",
                content: "导出操作失败,请重试",
            });
            this.setState({exportLoading: false});
        }
    }
    onReset = () => {
        this.setState({queryForm: {},},
            () => {
                this.getData();
            }
        );
    }
    onFormSearch = (values) => {
        this.setState({
            pageData: {pageNo: 1, pageSize: 10},
            queryForm: values
        }, () => {
            this.getData();
        });
    }

    render() {
        const {
            columns,
            dataSource,
            total,
            exportLoading,
            form_show,
            searchOption,
            pageData,
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <TheQueryForm
                    ref={(ref) => (this.queryFormRef = ref)}
                    show={form_show}
                    option={searchOption}
                    onReset={() => this.onReset()}
                    onGetValues={(values) => this.onFormSearch(values)}
                >
                    <TheButton
                        size="middle"
                        type="default"
                        haspermi={["wallet:petCoinsStats:export"]}
                        onClick={() => this.toExportTable()}
                        loading={exportLoading}
                    >
                        导出
                    </TheButton>
                </TheQueryForm>
                <TheTable
                    columns={columns}
                    dataSource={dataSource}
                    rowKey={"id"}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        );
    }
}

export default Index;
